import { convertToRaw,EditorState,ContentState } from 'draft-js';
import React,{useState,useEffect} from 'react'
import draftToHtml from 'draftjs-to-html'
import { Editor } from "react-draft-wysiwyg";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
import htmlToDraft from 'html-to-draftjs'
export default function NewsEditor(props) {
    const [editorState, setEditorState] = useState("")
    // 富文本编辑器中内容改变时渲染
    useEffect(() => {
        const html = props.content;
        if(html===undefined) return;
        const contentBlock = htmlToDraft(html);
        if (contentBlock) {
          const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
          const editorState1 = EditorState.createWithContent(contentState);
          setEditorState(editorState1)
        }
    }, [props.content])
    return (
        <div style={{backgroundColor:'#ffffff',height:'300px'}}>
            {/* 富文本编辑器 */}
            <Editor
                editorState={editorState}
                toolbarClassName="toolbarClassName"
                wrapperClassName="wrapperClassName"
                editorClassName="editorClassName"
                onEditorStateChange={(editorState)=>setEditorState(editorState)}
                onBlur={()=>{
                    // console.log(draftToHtml(convertToRaw(editorState.getCurrentContent())));
                    props.getContent(draftToHtml(convertToRaw(editorState.getCurrentContent())))
                }}

            />
        </div>
    )
}
